<template>
  <view>
        <view class="container search-container">
            <view class="input-s">
				<input class="uni-input" @input="onKeyInput" type="text" placeholder="请输入楼盘名称和区域" />
				<view class="search" @click="search()">搜  索</view>
			</view>
			<!--热门搜索-->
                <view class="j-box2 j-search-hot">
                    <view class="hd">
                        <p>热门搜索</p>
                    </view>

                    <view class="bd">
                        <view class="lb-area">
                            <span class="s-lb">临安</span>
                            <span class="s-lb">御东方园</span>
                            <span class="s-lb">融创运河印</span>
                        </view>

                    </view>
                </view>
        </view>

  </view>
</template>

<script>
export default {
  data() {
    return {
		keyWord:''
	};
  },
  methods: {
	  onKeyInput: function(event) {
	  	this.keyWord = event.target.value
	  },
	  search(){
		  var keyWord = this.keyWord;
		  if(keyWord == ''){
			  uni.showToast({
			      title: '请输入搜索内容',
			      duration: 2000,
			  	icon:'none'
			  });
			  return false;
		  }
		  
		  this.$common.navigateTo("/pages/index/houses/AllHouses?keyWord="+keyWord);
		  
	  }
  },
};
</script>

<style scoped>
    .container{
        height: 54rem;
        background: #fff;
    }
    .j-box2{
        margin: 0 40upx 40upx 40upx;
        padding-top:40upx;     
    }
    .hd>p{
        color: #3e4a59;
        font-size: 32upx;
        font-weight: 550;
    }
    .hd{
        margin-bottom: 30upx;
    }

    .lb-area>span{
        padding: 10upx 20upx;
        background: #fff3f0;
        color: #fa5f35;
        margin-right: 16upx;
        border-radius: 6upx;
    }
	.input-s{
		    height: 80rpx;
		    /* padding-left: 40rpx; */
			margin-left: 5%;
			width: 90%;
			display: flex;
	}
	.uni-input{
		display: block;
		background: #f4f4f4;
		border-radius: 5px;
		/* margin-left:1rpx; */
		width: 80%;
		height: 100%;
		color: inherit;
		opacity: 1;
		-webkit-text-fill-color: currentcolor;
		font: inherit;
		line-height: inherit;
		letter-spacing: inherit;
		text-align: inherit;
		text-indent: inherit;
		text-transform: inherit;
		text-shadow: inherit;
		padding-left: 40rpx; 
	}
	.search{
		width: 20%;
		height: 80rpx;
	}
</style>
